<style>
    .form-horizontal .control-label { width: 200px; }
</style>
<div class="container">

    <div class="page-header">
        <div class="row">
            <h1 class="span8"><? if($post_action=='EDIT'){ echo 'Uredi objekat';}else echo 'Novi objekat';?></h1>
        </div>


    </div>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#home" data-toggle="tab">General</a></li>
        <? if(FALSE): ?>
            <li><a href="#profile" data-toggle="tab">Price List</a></li>
            <li><a href="#messages" data-toggle="tab">Reservations</a></li>
            <li><a href="#settings" data-toggle="tab">Suplier reports</a></li>
            <li><a href="#settings" data-toggle="tab">Description</a></li>
            <li><a href="#settings" data-toggle="tab">Category</a></li>
            <li><a href="#settings" data-toggle="tab">SEO</a></li>
            <li><a href="#settings" data-toggle="tab">Availability</a></li>
            <? endif; ?>
    </ul>

    <div class="row">

        <div class="span12">

            <form class="form-horizontal form-qtrans" id="post_object_form" method="post" action="javascript:" name="post_object_form">

                <fieldset>

                    <input type="hidden" value="<?=$post_type;?>" name="post_type" id="post_type">
                    <input type="hidden" value="<?=$post_action;?>" name="post_action" id="post_action">    
                    <? if($post_action=='EDIT'){?><input type="hidden" value="<?=$post['ID'];?>" name="post_ID" id="post_ID"><?} ?>

                    <div class="group">

                        <span class="group-title apartment hidden">
                            GENERAL &nbsp;&nbsp;
                            <a id="trigger_click" href="#" title="Add attribute" onclick="select_form_attributes({url: base_url+'object_attributes/view_new/apartment'});return false;"><i class="icon-plus"></i> Add attribute</a>&nbsp;&nbsp; 
                            <a href="" class=""><i class="icon-wrench"></i> Edit attribute</a>
                        </span>
                        <span class="group-title hotel hidden">
                            GENERAL &nbsp;&nbsp;
                            <a href="" class=""><i class="icon-plus"></i> Add attribute</a>&nbsp;&nbsp; 
                            <a href="" class=""><i class="icon-wrench"></i> Edit attribute</a>
                        </span>
                        <span class="group-title villa hidden">
                            GENERAL &nbsp;&nbsp;
                            <a href="" class=""><i class="icon-plus"></i> Add attribute</a>&nbsp;&nbsp; 
                            <a href="" class=""><i class="icon-wrench"></i> Edit attribute</a>
                        </span>

                        <fieldset>    

                        <div class="control-group">
                            <label class="control-label">Select type:</label>
                            <div class="controls docs-input-sizes">

                                <select class="span3" name="object_type" id="object_type">
                                    <option value="0">--Please Select</option>
                                    <option value="apartment">Apartment</option>
                                    <option value="hotel">Hotel</option>
                                    <option value="villa">Villa</option>

                                </select>

                            </div>
                        </div>

                        <div class="control-group">
                            <label class="control-label">Select destination:</label>
                            <div class="controls docs-input-sizes">

                                <select class="span3">
                                    <option value="0">--Please Select</option>
                                    <? foreach($destinations as $destination): ?>
                                        <option value="<?=$destination['ID']?>"><?=$destination['post_title'];?></option>
                                        <?
                                            $childrens = $this->objects_model->view_post_children($destination['ID'],'resort');
                                            foreach($childrens as $children): ?>
                                            <option value="<?=$children['ID']?>"><?='-- '.$children['post_title'];?></option>
                                            <? endforeach; ?>
                                        <? endforeach; ?>

                                </select>

                                <a class="btn btn-mini" title="New Destination"><i class="icon-plus"></i></a>

                            </div>
                        </div>

                        <div class="control-group">
                            <label class="control-label">Select suplier:</label>
                            <div class="controls docs-input-sizes">

                                <select class="span2">
                                    <option value="0">--Please Select</option>
                                    <? foreach($owners as $owner): ?>
                                        <option value="<?=$owner['ID']?>"><?=$owner['name'].' '.$owner['surname'];?></option>
                                        <? endforeach; ?>

                                </select>

                                <a class="btn btn-mini" title="New Suplier"><i class="icon-plus"></i></a>
                                <a class="btn btn-mini" title="Edit suplier"><i class="icon-wrench"></i></a>

                            </div>
                        </div>

                        <div id="data-container"> </div>

                    </div>

                    <div class="form-actions">

                        <div class="row">
                            <span class="span2 save"><button class="btn btn-primary" type="submit">Save changes</button></span>
                            <span class="span6 loader"><img id="ajax-loading" class="ajax-loading" src="<?=base_url()?>assets/img/backgnds/loading.gif" style="visibility: hidden;"></span>
                        </div>

                    </div>

                </fieldset>
            </form>

        </div>

    </div>

</div> <!-- /container -->

<div id="select_form_attributes" class="hide">

    <form class="form-horizontal" id="select_form_attributes_form" method="post" action="<?=base_url('object_attributes/submit_post')?>" name="select_form_attributes_form">

        <input type="hidden" value="NEW" name="post_action">
        <input type="hidden" value="villa" name="type" id="type">

        <fieldset>

            <div class="group">

                <span class="group-title">SELECT ATTRIBUTES</span>             

                <div class="control-group">

                    <label class="control-label smaller">Attribute:</label>

                    <div class="controls docs-input-sizes">

                        <select class="span3" name="attributes_ID" id="attributes_ID" tabindex="1">

                            <option value="0">--Please Select</option>
                            <?foreach ($attributes as $attribute) :?>

                                <option value="<?=$attribute['ID']?>"><?=$attribute['name']?></option>

                                <?endforeach;?>

                        </select>

                        <a class="btn btn-mini" title="Add Attribute" id="new_attribute" onclick="new_form_attribute({url: base_url+'attributes/view_new_from_object/'+jQuery('#type').val()});return false;"><i class="icon-plus"></i></a>

                    </div>

                </div>

                <?=info('From drop down list, select an attribute you want to add to the group,  and click on Save changes. To enter a new attribute, click on the plus icon next to the search box.')?>        

            </div>

            <div id="validation_error"></div> 

            <!--<div class="form-actions">

            <img id="ajax-loading" class="ajax-loading" src="<?=base_url()?>assets/img/backgnds/loading.gif" style="visibility: hidden;">

            <button class="btn btn-primary" type="submit" tabindex="4">Save changes</button>
            <button class="btn" tabindex="5" id="cancel">Cancel</button>


            </div>-->

        </fieldset>

    </form>
</div>

<div id="new_form_attributes" class="hide">
    <form class="form-horizontal" id="post_new_attribute" method="post_new_attribute" action="<?=base_url('attributes/submit_post')?>" name="post">

        <input type="hidden" value="NEW" name="post_action">
        <input type="hidden" value="1" name="custom">

        <fieldset>

            <div class="group">

                <span class="group-title">ATTRIBUT DETAILS</span>             

                <div class="control-group">

                    <label class="control-label">Attribute value:</label>

                    <div class="controls docs-input-sizes">

                        <select class="span3" name="value" id="value" tabindex="1">

                            <option value="0">--Please Select</option>
                            <option value="yes/no">yes/no</option>
                            <option value="area">area</option>
                            <option value="distance">distance</option>
                            <option value="numeric data">numeric data</option>
                            <option value="descriptive data">descriptive data</option>
                            <option value="date">date</option>

                        </select>

                    </div>

                </div>        

            </div>

            <div class="group">

                <span class="group-title">NAME</span>             

                <div class="control-group">

                    <label class="control-label">Attribute name:</label>

                    <div class="controls docs-input-sizes">

                        <input type="text" class="input-xlarge" name="name" id="name" tabindex="2">

                    </div>

                </div>        

            </div>

            <div class="group">

                <span class="group-title">OPTIONS</span>             

                <div class="control-group">

                    <label class="control-label">Required:</label>

                    <div class="controls">

                        <label class="checkbox inline">

                            <input type="checkbox" value="1" name="required" id="required" tabindex="3">

                        </label>

                    </div>

                </div>        

            </div>

            <div id="validation_error"></div> 


        </fieldset>

    </form>
</div>

<script type="text/javascript">
    $(document).ready(function() {

            $('#object_type').live('change',function(){

                    id = $(this).val();
                    switch(id){
                        case 'apartment':
                            $('.apartment').removeClass('hidden');
                            $('.hotel').addClass('hidden');
                            $('.villa').addClass('hidden');
                            break;
                        case 'hotel':
                            $('.apartment').addClass('hidden');
                            $('.hotel').removeClass('hidden');
                            $('.villa').addClass('hidden');
                            break;
                        case 'villa':
                            $('.apartment').addClass('hidden');
                            $('.hotel').addClass('hidden');
                            $('.villa').removeClass('hidden');
                            break;
                        default:
                            $('.apartment').addClass('hidden');
                            $('.hotel').addClass('hidden');
                            $('.villa').addClass('hidden');
                            return false;
                    }

                    $.ajax({
                            url: base_url+'objects/form_view/',
                            dataType: 'json',
                            type: "POST",                              
                            data: {post_ID: id},
                            success: function (data, textStatus, xhr) {

                                $('#data-container').html(data.html);
                                //$('#myModal #edit_from_modal').attr('href',base_url+'owners/view_edit?post_ID='+id);
                                //console.log(data.html)

                            },
                            error: function (xhr, textStatus, errorThrown) {
                                alert('Error ocured...\n'+xhr+'\n'+textStatus+errorThrown+'\n');
                            }
                    });  

                    return false;

            });

            $('#object_type').val('apartment');
            $('.apartment').removeClass('hidden');

            select_form_attributes = function(data)
            {

                //$('#select_form_attributes').load(data.url); 
                $( '#select_form_attributes').dialog({
                        autoOpen: false,
                        height: 385,
                        width: 535,
                        modal: true,
                        title: 'Select attributes',
                        buttons: {
                            "Save changes": function() {

                                console.log('save')
                                jQuery("#select_form_attributes_form").trigger('submit');


                            },
                            Cancel: function() {
                                $( this ).dialog( "close" );
                            }
                        },
                        close: function() {
                            console.log('select_form_attributes is closed');
                        },
                        open: function() {

                            //check dropdown methot - valdation
                            $.validator.addMethod("check_item_dropdown", function(value, element) {  
                                    return this.optional(element) || value != 0  ;   
                                }, "Please select an item from the dropdown list.");

                            // Override default error message
                            jQuery.validator.messages.required = "";  

                            // Override generation of error label
                            jQuery("#select_form_attributes_form").validate({

                                    rules: {

                                        //General
                                        attributes_ID: { check_item_dropdown: true }

                                    }, 

                                    highlight: function(element) {

                                        //console.log(element.name)
                                        $(element).parent().parent().addClass("error");

                                    },
                                    unhighlight: function(element) {

                                        $(element).parent().parent().removeClass("error");

                                    },

                                    submitHandler: function(form) {

                                        //$('button[type=submit]').attr('disabled', 'disabled');

                                        $('#ajax-loading').css('visibility','visible');

                                        var form = $("#select_form_attributes_form");
                                        var form_data = form.serialize();

                                        $.ajax({
                                                url: form.attr('action'),
                                                dataType: 'json',
                                                type: "POST",
                                                data: form_data,
                                                success: function (data, textStatus, xhr) {

                                                    jQuery('#ajax-loading').css('visibility','hidden');

                                                    if(data.action==true){

                                                        jQuery('.ui-dialog-buttonpane').prepend('&nbsp;&nbsp;&nbsp;'+data.msg);

                                                        // REDIRECT
                                                        function promo_show(){
                                                            window.location.href = base_url+'<?=$page?>/view_all'; 
                                                        }
                                                        //window.setTimeout(function() { promo_show(); }, 1001);

                                                    }else{

                                                        $('button[type=submit]').removeAttr('disabled');
                                                        $('#validation_error').html(error(data.msg,'error'));
                                                    }
                                                },
                                                error: function (xhr, textStatus, errorThrown) {
                                                    alert('Error ocured...\n'+xhr+'\n'+textStatus+errorThrown+'\n');
                                                    $('button[type=submit]').removeAttr('disabled'); 
                                                    $('#ajax-loading').css('visibility','hidden');
                                                }
                                        });

                                    },
                                    errorPlacement: function(error, element){}
                            });

                            //helper function - alert
                            function error(string,type)
                            {
                                html = '<div class="alert alert-'+type+' clearfix">'
                                '<button type="button" class="close" data-dismiss="alert">&times;</button>'
                                html+= string; 
                                html+= '</div>';
                                return html;  
                            }

                            // enable form submit button
                            $('button[type=submit]').removeAttr('disabled'); 
                        }
                });

                $( "#select_form_attributes" ).dialog( "open" );
            }

            new_form_attribute = function(data)
            {
                $( '#new_form_attributes').dialog({
                        autoOpen: false,
                        height: 567,
                        width: 567,
                        modal: true,
                        title: 'New attribute',
                        buttons: {
                            "Save changes": function() {

                                console.log('save')
                                jQuery("#post_new_attribute").trigger('submit');


                            },
                            Cancel: function() {
                                $( this ).dialog( "close" );
                            }
                        },
                        close: function() {
                            console.log('new_form_attributes is closed');
                        },
                        open: function() {

                            //check dropdown methot - valdation
                            $.validator.addMethod("check_item_dropdown", function(value, element) {  
                                    return this.optional(element) || value != 0  ;   
                                }, "Please select an item from the dropdown list.");

                            // Override default error message
                            jQuery.validator.messages.required = "";   

                            // Override generation of error label
                            jQuery("#post_new_attribute").validate({

                                    rules: {

                                        //General
                                        value: { check_item_dropdown: true },
                                        name: "required"

                                    }, 

                                    highlight: function(element) {

                                        //console.log(element.name)
                                        $(element).parent().parent().addClass("error");

                                    },
                                    unhighlight: function(element) {

                                        $(element).parent().parent().removeClass("error");

                                    },

                                    submitHandler: function(form) {

                                        $('button[type=submit]').attr('disabled', 'disabled');

                                        $('#ajax-loading').css('visibility','visible');

                                        var form = $("#post_new_attribute");
                                        var form_data = form.serialize();

                                        $.ajax({
                                                url: form.attr('action'),
                                                dataType: 'json',
                                                type: "POST",
                                                data: form_data,
                                                success: function (data, textStatus, xhr) {

                                                    jQuery('#ajax-loading').css('visibility','hidden');

                                                    if(data.action==true){

                                                        jQuery('.ui-dialog-buttonpane').prepend('&nbsp;&nbsp;&nbsp;'+data.msg);                                      

                                                        $('#attributes_ID').append(
                                                            $('<option></option>').val($('#name').val()).html($('#name').val())
                                                        );

                                                        // REDIRECT
                                                        function promo_show(){
                                                            //$('#myModal'+window.modal_id).modal('hide');
                                                            //$('#bpopup').bPopup().close();
                                                        }
                                                        window.setTimeout(function() { promo_show(); }, 1001);


                                                    }else{

                                                        $('button[type=submit]').removeAttr('disabled');
                                                        $('#validation_error').html(error(data.msg,'error'));
                                                    }
                                                },
                                                error: function (xhr, textStatus, errorThrown) {
                                                    alert('Error ocured...\n'+xhr+'\n'+textStatus+errorThrown+'\n');
                                                    $('button[type=submit]').removeAttr('disabled'); 
                                                    $('#ajax-loading').css('visibility','hidden');
                                                }
                                        });

                                    },
                                    errorPlacement: function(error, element){}
                            });

                            //helper function - alert
                            function error(string,type)
                            {
                                html = '<div class="alert alert-'+type+' clearfix">'
                                '<button type="button" class="close" data-dismiss="alert">&times;</button>'
                                html+= string; 
                                html+= '</div>';
                                return html;  
                            }

                            // enable form submit button
                            $('button[type=submit]').removeAttr('disabled'); 
                        }
                });

                $( "#new_form_attributes" ).dialog( "open" );
            }

    } );
</script>